<template>
  <div class="ivu-box">
    <Breadcrumb>
      <BreadcrumbItem>订单管理</BreadcrumbItem>
      <BreadcrumbItem>订单详情</BreadcrumbItem>
    </Breadcrumb>
    <Form>
      <FormItem>
        <Button @click="$router.go(-1)" style="margin-right: 10px">返回</Button>
      </FormItem>
    </Form>

    <!-- 商品，价格，是否异常，是否完成，订单编号，设备编号，活动编号，哈哈系统编号，订单标题，订单明细，来源，商家用户编号（out_user_id），创建时间 -->

    <div class="form_box">
      <h3>订单详情</h3>
      <div class="borderCard" style="flex-flow: column">
        <ul>
          <li>
            <div class="name">用户:</div>
            <div class="text">用户1</div>
            <!-- 接口未返回数据 -->
          </li>
          <li>
            <div class="name">商品:</div>
            <div class="text">商品1</div>
            <!-- 接口未返回数据 -->
          </li>
          <li>
            <div class="name">价格:</div>
            <div class="text">{{ form.order_money }}</div>
          </li>
          <li>
            <div class="name">是否异常:</div>
            <div class="text" v-show="form.status == 1">正常</div>
            <div class="text" v-show="form.status == 2">异常</div>
          </li>
          <li>
            <div class="name">是否完成:</div>
            <div class="text">未完成</div>
            <!-- 接口未返回数据 -->
          </li>
        </ul>
        <ul>
          <li>
            <div class="name">订单编号:</div>
            <div class="text">{{ form.order_id }}</div>
          </li>
          <li>
            <div class="name">设备编号:</div>
            <div class="text">{{ form.device_id }}</div>
          </li>
          <li>
            <div class="name">活动编号:</div>
            <div class="text">{{ form.activity_id }}</div>
          </li>
          <li>
            <div class="name">哈哈系统编号:</div>
            <div class="text">{{ form.user_id }}</div>
          </li>
          <li>
            <div class="name">订单标题:</div>
            <div class="text">{{ form.order_name }}</div>
          </li>
        </ul>
        <ul>
          <!-- <li><div class="name">订单明细:</div><div class="text">{{form.order_detail}}</div></li> -->
          <li>
            <div class="name">来源:</div>
            <div class="text">{{ form.from }}</div>
          </li>
          <li>
            <div class="name">商家用户编号:</div>
            <div class="text">title</div>
            <!-- 接口未返回数据 -->
          </li>
          <li>
            <div class="name">创建时间:</div>
            <div class="text">{{ form.create_time }}</div>
          </li>
        </ul>
      </div>

      <h3>商品区</h3>
      <div class="borderCard" style="display: block">
        <Table :columns="columns1" :data="tableData">
          <template slot-scope="{ row }" slot="pic">
            <img
              :src="row.pic"
              @click="$preview(row.pic)"
              style="width: 100%"
            />
          </template>
        </Table>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {},
      columns1: [
        {
          title: "商品ID",
          key: "id",
          minWidth: 100,
          align: "center",
        },
        {
          title: "商品code",
          key: "code",
          minWidth: 100,
          align: "center",
        },
        {
          title: "商品名称",
          key: "product_name",
          minWidth: 100,
          align: "center",
        },
        {
          title: "商品图片",
          slot: "pic",
          minWidth: 100,
          align: "center",
        },
        {
          title: "商品数量",
          key: "product_num",
          minWidth: 150,
          align: "center",
        },
        {
          title: "商品金额",
          key: "money",
          minWidth: 150,
          align: "center",
        },
        {
          title: "商品原价",
          key: "origin_price",
          minWidth: 150,
          align: "center",
        },
        {
          title: "商品价格",
          key: "price",
          minWidth: 150,
          align: "center",
        },
      ],
      tableData: [

      ],
    };
  },
  methods: {
    init() {
      this.axios
        .post("/order/order_detail", { id: this.$route.query.id })
        .then((res) => {
          console.log("res: ", res);
          if (res.code == 1) {
            console.log(res);
            this.form = res.data;
            this.tableData = res.data.order_goods;
            console.log("res.data: ", res.data);
            // this.total = res.data.count;
            // this.tableData = res.data.list;
          }
        });
    },
  },
  created() {
    this.init();
  },
};
</script>

<style scoped lang="scss">
.borderCard {
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  min-width: 900px;
}
// .borderCard ul{min-width: 300px;box-sizing: border-box;border: 1px solid #ddd;padding: 20px;}
// .borderCard ul li{list-style: none;line-height: 26px;font-size: 14px;overflow: hidden;display: block;}
// .borderCard ul li .name{color: #999;float: left;width: 130px;padding-right: 20px;text-align: right;}
// .borderCard ul li .text{color: #000;float: left;}

.borderCard ul {
  display: block;
  min-width: 300px;
  box-sizing: border-box;
  border: 1px solid #ddd;
  padding: 20px;
  margin-bottom: 10px;
}

.borderCard ul li {
  list-style: none;
  line-height: 26px;
  font-size: 14px;
  overflow: hidden;
  display: block;
}

.borderCard ul li .name {
  color: #999;
  float: left;
  width: 130px;
  padding-right: 20px;
  text-align: right;
}

.borderCard ul li .text {
  color: #000;
  float: left;
}

h3 {
  line-height: 50px;
}

.subordinate {
  margin: 10px 20px;
}

.checkbox {
  margin: 5px 10px;
  min-width: 200px;
}

.check {
  margin-top: 5px;
  margin-left: 30px;
  min-width: 160px;
}

.checkboxs {
  border-bottom: 1px solid silver;
  padding-bottom: 10px;
}

.outer {
  margin: 20px 0;
  padding: 10px;
  border: 1px solid silver;
  border-radius: 5px;
}
</style>
